<template>
  <div style="width: 600px">
    <p>请选择地址</p>
    <el-cascader :options="options" :props="props1" clearable v-model="selectStreet" >
      <template #default="{ node, data }">
        <span>{{ data.name }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
</template>

<script setup lang="ts">
import allAreas from './lib/pcas-code.json'
import {ref,watch} from "vue";
export interface AreaItem {
  name: string,
  code: string,
  children?: AreaItem[]
}
export interface Data {
  name: string,
  code: string
}
let options = ref(allAreas)
let selectStreet = ref([])


let emits = defineEmits(['change'])
watch(()=>selectStreet.value,value => {
  if(value && value.length === 4){
    let selectCity = ref<AreaItem[]>([])
    selectCity.value = options.value!.find(item=>item.code === value[0])!.children!;
    let selectArea =ref<AreaItem[]>([])
    selectArea.value = selectCity.value!.find(item=>item.code === value[1])!.children!;
    let selectStreet2 = ref<AreaItem[]>([])
    selectStreet2.value = selectArea.value!.find(item=>item.code === value[2])!.children!;
    let provinceData: Data = {
      code: value[0],
      name: options.value.find(item => item.code === value[0])!.name
    }
    let cityData: Data = {
      code: value[1],
      name: selectCity.value.find(item => item.code === value[1])!.name
    }
    let areaData: Data = {
      code: value[2],
      name: selectArea.value.find(item => item.code === value[2])!.name
    }
    let streetData: Data = {
      code: value[3],
      name: selectStreet2.value.find(item => item.code === value[3])!.name
    }
    emits('change',{
      province: provinceData,
      city: cityData,
      area: areaData,
      street: streetData,
    })
  }
})
const props1 = {
  checkStrictly: true,
  value:'code',
  label:'name',
}




</script>

<style lang="scss" scoped>

</style>
